.{$px}Amount
    display: inline-flex
    align-items: center
    justify-content: center
    width: 100%
    &-add
    &-remove
        min-width: 56px
        height: 56px
        background: none
        display: block
        position: relative
        margin-right: 10px
        padding: 0
        cursor: pointer
        line-height: 0
        border: 1px solid transparent
        background-color: #ebebeb;
        transition: all 300ms
        &:focus
            outline: none
        +m('desktop')
            &:hover
                background-color: lighten(clr-primary, 85%)
                border-color: clr-primary
                transition: all 300ms
        &:after
            position: absolute
            content: ''
            display: block
            width: 14px
            margin-left: -(@width / 2) + 0.1
            height: 1px
            top: 50%
            left: 50%
            background: text-main

    &-add
        margin-left: 10px
        margin-right: 0
        &:before
            position: absolute
            content: ''
            display: block
            height: 14px
            width: 1px
            left: 50%
            top: 50%
            margin-top: -(@height / 2) + 0.1
            background: text-main
    & &-input
        text-align: center
        color: clr-primary;
        font-size: font-md;
        padding:  3px 8px
        min-width: auto
    &_product
        width: auto
        height: 42px
        +e(-add)
            height: 42px
            min-width: 42px
        +e(-remove)
            height: 42px
            min-width: 42px
        +e(-input)
            width: 59px
            min-height: 42px
